<template>
  <div class="rent-page">
    <van-nav-bar
      title="发布房源"
      left-arrow
      @click-left="$router.back()"
    />
<van-form @submit="onSubmit">
   <van-cell title="房源信息" />
  <van-cell title="小区名称" is-link value="请输入小区名称" />
  <van-cell-group>
  <van-cell title="租金" value="¥/月" />
   <van-field
  v-model="value"
  placeholder="请输入租金/月"
  />
</van-cell-group>
 <van-cell-group>
  <van-cell title="建筑面积" value="m²" />
  <van-field
  v-model="mouthvalue"
  placeholder="请输入租金/月"
  />
</van-cell-group>
<van-cell title="户型" is-link :value="styledata" @click="showPicker = true"/>
<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>

<van-cell title="所在楼层" is-link :value="floordata" @click="showFloor = true"/>
<van-popup v-model="showFloor" round position="bottom">
  <van-picker
    show-toolbar
    :columns="floorcolumns"
    @cancel="showFloor = false"
    @confirm="onFloor"
  />
</van-popup>
<van-cell :border="false" title="朝向" is-link :value="towarddata" @click="showtoward = true"/>
<van-popup v-model="showtoward" round position="bottom">
  <van-picker
    show-toolbar
    :columns="towardcolumns"
    @cancel="showtowards = false"
    @confirm="ontoward"
  />
</van-popup>

<van-cell title="房屋标题"  />
<van-field
  v-model="titlevalue"
  placeholder="请输入标题 (例如:整租 小区名 2室 5000元)"
  :border="false"
  />
  <van-cell title="房屋图像"  />
   <van-uploader :after-read="afterRead" />
   <van-cell title="房屋配置"  />
   <van-grid :column-num="5" :border="false"
   >
  <van-grid-item
  v-for="(item,index) in houseList" :key="index"
  @click="colorFn(index)"
  :class="{active:item.class===true}"
  :icon="item.img"
  :text="item.info" />
</van-grid>

 <van-cell title="房屋描述"  />
 <van-field
  v-model="detailvalue"
  placeholder="请输入房屋描述信息"
  :border="false"
  />

  <div >
    <van-button  style="width:187px;" type="default">取消</van-button>
    <van-button style="width:187px;"  type="primary">提交</van-button>
  </div>

</van-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      houseList: [
        { img: 'photo-o', info: '衣柜', class: 'fasle' },
        { img: 'photo-o', info: '洗衣机', class: 'fasle' },
        { img: 'photo-o', info: '空调  ', class: 'fasle' },
        { img: 'photo-o', info: '天然气', class: 'fasle' },
        { img: 'photo-o', info: '冰箱  ', class: 'fasle' },
        { img: 'photo-o', info: '暖气  ', class: 'fasle' },
        { img: 'photo-o', info: '电视  ', class: 'fasle' },
        { img: 'photo-o', info: '热水器', class: 'fasle' },
        { img: 'photo-o', info: '宽带  ', class: 'fasle' },
        { img: 'photo-o', info: '沙发  ', class: 'fasle' }
      ],
      value: '2',
      mouthvalue: '',
      styledata: '',
      titlevalue: '',
      detailvalue: '',
      data: '请输入',
      showPicker: false,
      columns: ['一室', '二室', '三室', '四室+'],
      floordata: '请输入',
      showFloor: false,
      floorcolumns: ['高楼层', '中楼层', '低楼层'],
      towarddata: '请输入',
      showtoward: false,
      towardcolumns: ['东', '西', '南', '北', '东南', '东北', '西南', '西北']
    }
  },
  methods: {
    onSubmit () {},
    onConfirm (value) {
      this.data = value
      this.showPicker = false
    },
    onFloor (value) {
      this.floordata = value
      this.showFloor = false
    },
    ontoward (value) {
      this.towarddata = value
      this.showtoward = false
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    colorFn (id) {
      this.houseList[id].class = !this.houseList[id].class
    }
  }
}
</script>

<style lang="less" scoped>
.rent-page{

  .haeder{
    color: #21b97a;
    background-color: #fff;
    font-size: 15px;
  }
.van-cell-group{
  position: relative;

  .van-field{
    position: absolute;
    top:0px;
    left: 80px;
    width: 216px;
    height: 30px;

  }
}
  }
  .active{
color: #21b97a;
  }

</style>
